<template>
  <div class="app-wrapper">
    <!-- 顶部导航 -->
    <div class="navbar">
      <div class="left">
        <div class="logo-small" @click="router.push('/')">
          <a><img src="../assets/logo.png" alt="考试系统"/></a>
        </div>
        <el-menu
            :default-active="activeName"
            mode="horizontal"
            :router=false
            style="width: 100vh"
            @select="handleMenuSelect"
        >
          <el-menu-item index="我的">我的</el-menu-item>
<!--          <el-menu-item index="公开">公开</el-menu-item>-->
        </el-menu>
      </div>
      <div class="right">
        <el-dropdown trigger="click">
          <div class="avatar-wrapper">
            <el-avatar
                :size="30"
                :src="userInfo.avatar || 'src/assets/images/head.png'"
            />
            <span class="username">{{ userInfo.username }}</span>
            <el-icon>
              <CaretBottom/>
            </el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="$router.push('/userInfo')"
              >个人信息
              </el-dropdown-item
              >
              <el-dropdown-item divided @click="handleLogout"
              >退出登录
              </el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div :class="['main-container', mainContainerClass]">
      <!-- 侧边栏 -->
      <div
          class="sidebar-container"
          :class="{ 'is-collapse': !sidebar.opened }"
      >
        <div class="sidebar-header" @click="toggleSidebar">
          <el-icon class="toggle-sidebar">
            <Fold v-if="sidebar.opened"/>
            <Expand v-else/>
          </el-icon>
        </div>
        <el-menu
            :default-active="activeMenu"
            class="sidebar-menu"
            :collapse="!sidebar.opened"
            background-color="#fff"
            text-color="#596B8C"
            active-text-color="#0070e0"
            router
        >
          <el-menu-item index="/question">
            <el-icon>
              <Tickets/>
            </el-icon>
            <template #title>{{ activeName }}题目</template>
          </el-menu-item>
          <el-menu-item index="/paper">
            <el-icon>
              <Document/>
            </el-icon>
            <template #title>{{ activeName }}试卷</template>
          </el-menu-item>
          <el-menu-item index="/exam">
            <el-icon>
              <Edit/>
            </el-icon>
            <template #title>{{ activeName }}考试</template>
          </el-menu-item>
          <el-menu-item index="/course">
            <el-icon>
              <School/>
            </el-icon>
            <template #title>{{ activeName }}课程</template>
          </el-menu-item>
        </el-menu>
      </div>

      <!-- 路由视图 -->
      <div class="app-main">
        <router-view v-slot="{ Component }">
          <transition name="fade-transform" mode="out-in">
            <component :is="Component"/>
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import {computed, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useAppStore} from "../store";
import {useUserStore} from "../store";
import {
  HomeFilled,
  Document,
  Edit,
  School,
  Fold,
  Expand,
  CaretBottom,
  Tickets,
} from "@element-plus/icons-vue";
import {userApi} from "../api/userApi.js";

const route = useRoute();
const router = useRouter();
const appStore = useAppStore();
const userStore = useUserStore();

const sidebar = computed(() => appStore.sidebar);
const userInfo = computed(() => userStore.userInfo);
const activeMenu = computed(() => route.path);
const currentRoute = computed(() => route.meta.title || route.name);
const activeName = ref("我的")

const handleMenuSelect = (index) => {
  activeName.value = index
  // 可以在这里添加其他逻辑
}
const mainContainerClass = computed(() => ({
  is_collapse: !sidebar.value.opened,
  not_is_collapse: sidebar.value.opened,
}));

const toggleSidebar = () => {
  appStore.toggleSidebar();
};

const handleLogout = async () => {
  await userApi.logout();
  userStore.logout();
  router.push("/login");
};
</script>

<style scoped>
.app-wrapper {
  position: relative;
  height: 100vh;
  width: 100%;
}

.navbar {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  background-color: #fff;
}

.navbar .left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-small {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 15px;
}

.logo-small img {
  height: 32px;
  width: auto;
}

.toggle-sidebar {
  cursor: pointer;
  font-size: 20px;
  color: #596b8c;
  transition: all 0.3s;
}

.toggle-sidebar:hover {
  color: #0070e0;
}

.avatar-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.username {
  margin: 0 5px;
}

.main-container {
  padding-top: 60px;
  min-height: calc(100vh - 60px);
  display: flex;
}

.sidebar-container {
  width: 150px;
  background-color: #fff;
  transition: width 0.28s;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 0;
  z-index: 999;
}

.el-menu-item:hover {
  color: #0070e0;
  background-color: #f0f0f0;
}

.is_collapse {
  margin-left: 64px;
}

.not_is_collapse {
  margin-left: 150px;
}

.sidebar-container.is-collapse {
  width: 64px;
}

.sidebar-header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.sidebar-menu {
  border: none;
}

.app-main {
  flex: 1;
  overflow-y: auto;
}

.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.5s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

@media screen and (max-width: 768px) {
  .sidebar-header,
  .sidebar-container {
    display: none;
  }

  .main-container {
    margin-left: 0 !important;
    width: 100%;
  }
}
</style>
